<template>
<view>
<view>
  <u-tabs :current="active" :list="tabArr" @change="onShowChange" style="margin-bottom:10px" ref="tabs"></u-tabs>
  <view class="coupPage">
    <view v-if="list.length>0">
      <view v-for="(coupon, index) in list" :key="index" class="coupon">
        <coupon :coupon="coupon" state="use" @gotoUse="gotoUse"></coupon>
      </view>
    </view>
    <noCoupon v-else></noCoupon>
  </view>
</view>
<auth :authType="authType" @authClick="authClick"></auth>
</view>
</template>
<script lang='ts'>
import { Component, Vue } from 'vue-property-decorator'
import {
  getUserCoupon,
} from "@/api/modules/coupon";
import coupon from "@/components/couponCom/coupon/coupon.vue"
import noCoupon from "@/components/couponCom/noCoupon/noCoupon.vue"
import auth from "@/components/auth/auth.vue"
@Component({
    components:{
        coupon,
        noCoupon,
        auth
    }
})
export default class Coupon extends Vue {
    active:number=0
    tabArr=[{
      name:"未使用"
    },
    {
      name:"已使用"
    },
    {
      name:"已过期"
    }]
    /** 可领取优惠数组 */
    list:Array<any>=[]

    authType:boolean=false

  mounted() {
    this.getList(this.active);
  }

  /**
   * 展开式优惠券
   */
  onShowChange(e) {   
    this.getList(e.index);
    this.setData({
      active: e.index,
    });
  }
    /**
   * 获取用户优惠券
   */
  getList(type) {
    const dealList = [] as any;
    const useLesslist = [] as any;
    getUserCoupon({}).then(res => {
      res.forEach((item, index) => {
        item.hasUse = false;
        item.index = index;

        if (item.status === 2) {
          item.useStatus = 2;
        }

        if (item.useStatus === type) {
          dealList.push(item);
        } else {
          useLesslist.push(item);
        }
      });
      this.setData({
        list: dealList,
        useLesslist,
      });
    });
  }

    /**
   * 去使用优惠券
   */
  gotoUse(e) {
    const item = e.item;
    if (item.productType === 0) {
      this.$store.dispatch("settingStore/backHome");
    } else {
      uni.navigateTo({
        url: `/subcontract/pages/spellPage/second-catgoods/second-catgoods?chanel=${5}&couponId=${
          item.id
        }`,
      });
    }
  }

   authClick(){
     this.authType = false
   }
}
</script>
<style lang="scss" scoped>
.coupPage {
    background-color: #fff;
    height: 100%;
    padding-top: 10px;
    // padding: 10px 20px;
}


.coupon {
    display: flex;
    // padding: 5px;
}

.center {
    @include flex(center, center)
}

.showButton {
    width: 300px;
    height: 40px;
    border-radius: 50px;
    background-image: linear-gradient(#FA425F, #FD2D23);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-top: 15px;
    box-shadow: 5px -5px #FFDADD;  
}
</style>